<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=442186
-->
<head>
  <title>Test for Bug 442186</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=442186">Mozilla Bug 442186</a>
<p id="display"></p>
<div id="content">
  <h2> two &lt;div&gt; containers </h2>
  <section contenteditable id="test1">
    <div> First paragraph with some text. </div>
    <div> Second paragraph with some text. </div>
  </section>

  <h2> two paragraphs </h2>
  <section contenteditable id="test2">
    <p> First paragraph with some text. </p>
    <p> Second paragraph with some text. </p>
  </section>

  <h2> one text node, one paragraph </h2>
  <section contenteditable id="test3">
    First paragraph with some text.
    <p> Second paragraph with some text. </p>
  </section>
</div>

<pre id="test">
<script type="application/javascript">

/** Test for Bug 442186 **/
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(runTests);

function justify(textNode, pos) {
  if (!pos) pos = 10;

  // put the caret on the requested character
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(textNode, pos);
  range.setEnd(textNode, pos);
  sel.addRange(range);

  // align
  document.execCommand("justifyright", false, null);
}

function runTests() {
  document.execCommand("stylewithcss", false, "true");

  const test1 = document.getElementById("test1");
  const test2 = document.getElementById("test2");
  const test3 = document.getElementById("test3");

  // #test1: two <div> containers
  const line1 = test1.querySelector("div").firstChild;
  test1.focus();
  justify(line1);
  is(test1.querySelectorAll("*").length, 2,
    "Aligning the first child should not create nor remove any element.");
  is(line1.parentNode.nodeName.toLowerCase(), "div",
    "Aligning the first <div> should not modify its node type.");
  is(line1.parentNode.style.textAlign, "right",
    "Aligning the first <div> should set a 'text-align: right' style rule.");

  // #test2: two paragraphs
  const line2 = test2.querySelector("p").firstChild;
  test2.focus();
  justify(line2);
  is(test2.querySelectorAll("*").length, 2,
    "Aligning the first child should not create nor remove any element.");
  is(line2.parentNode.nodeName.toLowerCase(), "p",
    "Aligning the first paragraph should not modify its node type.");
  is(line2.parentNode.style.textAlign, "right",
    "Aligning the first paragraph should set a 'text-align: right' style rule.");

  // #test3: one text node, two paragraphs
  const line3 = test3.firstChild;
  test3.focus();
  justify(line3);
  is(test3.querySelectorAll("*").length, 2,
    "Aligning the first child should create a block element.");
  is(line3.parentNode.nodeName.toLowerCase(), "div",
    "Aligning the first child should create a block element.");
  is(line3.parentNode.style.textAlign, "right",
    "Aligning the first line should set a 'text-align: right' style rule.");

  // done
  SimpleTest.finish();
}

</script>
</pre>
</body>
</html>
